<template>
	<view class="modal flex align-center justify-center" v-if="open_loginmodel">
		<view class="mask" @click="maskClick">

		</view>
		<view class="inner ">
			
			<view class="inner_d">
				<view class="close_div" @click="closedmodel">
					<image class="closeimg" src="/static/close.png" mode="aspectFit"></image>
				</view>
				<view class="inner_d_img">
					<image class="img1" src="/static/index_5.png" mode="aspectFit"></image>
				</view>
				<view class="inner_d_msg">
					<view class="inner_d_msg2">
						欢迎您来到采祁·食养生活馆
					</view>
					<view class="inner_d_msg3">
						现在登录成为采祁会员，
					</view>
					<view class="inner_d_msg3">
						消费得积分，享受多重好礼！
					</view>
					<view class="inner_d_msg4">
						<!-- <checkbox-group @change="checkboxChange" style="display: inline-block;transform:scale(0.7)">
							<checkbox value="true" />
						</checkbox-group>
						<text>我已阅读并同意</text>
						<text>《用户协议》</text>
						<text>《隐私政策》</text> -->
						<u-checkbox-group>
							<u-checkbox class="yue" shape="circle" v-model="active_off">
								<u-checkbox-group class="yuedu">我已阅读并同意</u-checkbox-group>
							</u-checkbox>
						</u-checkbox-group>
						<view class="xieyi" @click="safe()">《用户协议》</view>
					</view>
					<view class="inner_d_msg5">
						<view class="inner_d_msg5_btn" @click="closedmodel">
							暂不登录
						</view>
						<view class="inner_d_msg5_btn2" :class="active_off?'active':''" @click="gologin">
							手机号快捷登录
						</view>
					</view>
				</view>
				
			</view>

		</view>
	</view>
</template>

<script>
	import store from '@/store'
	// import { mapState } from 'vuex'
	
	export default {
		name:"loginview",
		data() {
			return {
				active_off:false,
			};
		},
		computed: {
			open_loginmodel(){
				return store.state.user.open_loginmodel;
			}
		},
		mounted() {
			console.log('open_loginmodel',this.open_loginmodel)
		},
		watch:{
			open_loginmodel(newval,oldval){
				// console.log('newval',newval)
				// console.log('oldval',oldval)
			},
		},
		methods:{
			checkboxChange(e){
				console.log(e)
				if(e.detail.value.length > 0){
					this.active_off = true
				}else{
					this.active_off = false
				}
			},
			// 用户协议
			safe(){
				this.$navTo('pages/user/safe/index')
			},
			closedmodel(){
				store.dispatch('updateloginmodel',false)
			},
			gologin(){
				if(this.active_off){
					uni.navigateTo({
						url: "/pages/login/index"
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "/static/reset.scss";

	.modal {
		position: fixed;
		left: 0;
		top: 0;
		z-index: 999;
		width: 100vw;
		height: 100vh;

		.mask {
			width: 100%;
			height: 100%;
			position: absolute;
			left: 0;
			top: 0;
			background: #000000;
			opacity: 0.4;
			z-index: 1;
		}

		.inner {

			position: relative;
			z-index: 2;
			top: -100rpx;

			.panel {
				width: 263*2rpx;
				padding: 24*2rpx;

				.title {
					width: 100%;
					
					font-weight: bold;
					font-size: 18*2rpx;
					line-height: 25*2rpx;
					text-align: center;
					color: #141A1E;
				}

				.content {
					font-size: 14*2rpx;
					line-height: 20*2rpx;
					color: #141A1E;
					margin-top: 16*2rpx;
				}

				.btns {
					margin-top: 16*2rpx;

					.cancel,
					.confirm {
						width: 123.5*2rpx;
						height: 44*2rpx;
						background: #F2F2F2;
						border-radius: 44*2rpx;
						font-weight: bold;
						color: #141A1E;
						text-align: center;
						line-height: 44*2rpx;
					}

					.confirm {
						background: #FE6666;
						color: #FFFFFF;
					}
				}
			}
		}
	}

	.inner_d_img {
		position: relative;
	}

	.img1 {
		width: 640rpx;
		height: 571rpx;
	}

	.img2 {
		position: absolute;
		top: 146rpx;
		/* left: 202rpx; */
		left: 0;
		right: 0;
		text-align: center;
		margin: 0 auto;
		width: 236rpx;
		height: 236rpx;
	}

	.inner_d_msg {
		position: absolute;
		top: 150rpx;
		/* left: 130rpx; */
		left: 0;
		right: 0;
		text-align: center;
	}

	.inner_d_msg2 {
		font-weight: 900;
		font-size: 32rpx;
		color: #333333;
		// line-height: 0rpx;
		text-align: center;
		font-style: normal;
		text-transform: none;
		margin-bottom: 36rpx;
		height: 44rpx;
	}
	.inner_d_msg3{
		height: 40rpx;
		font-weight: 400;
		font-size: 28rpx;
		color: #333333;
		margin-bottom: 12rpx;
	}

	.close_div {
		position: absolute;
		top: 100rpx;
		right: 48rpx;
		width: 38rpx;
		height: 38rpx;
		z-index: 1;
	}

	.closeimg {
		width: 38rpx;
		height: 38rpx;
	}
	.inner_d_msg4{
		font-size: 24rpx;
		margin-top: 58rpx;
		display:flex;
		align-items: center;
		width: 100%;
		justify-content: center;
	}
	.inner_d_msg5{
		margin-top: 20rpx;
		display: flex;
		justify-content: center;
	}
	.inner_d_msg5_btn{
		width: 286rpx;
		height: 80rpx;
		background: #FFFFFF;
		border-radius: 10rpx 10rpx 10rpx 10rpx;
		border: 2rpx solid #1A8148;
		opacity: 0.5;
		line-height: 80rpx;
		color: #1A8148;
		margin-right: 20rpx;
	}
	.inner_d_msg5_btn2{
		width: 286rpx;
		height: 80rpx;
		
		background: #DDDDDD;
		border-radius: 10rpx 10rpx 10rpx 10rpx;
		line-height: 80rpx;
	}
	.active{
		background: #1A8148;
		border-radius: 10rpx 10rpx 10rpx 10rpx;
		color: #FFFFFF;
	}
	.yue {
		width: 100%;
		display: flex;
		align-items: center;
		text-align: center;
		justify-content: center;
	}
	
	.yuedu {
		color: #B3B3B3;
		font-size: 24rpx;
		display: inline-flex;
	}
	
	.xieyi {
		font-size: 24rpx;
		color: #1A8148;
		display: inline-flex;
		margin-left:-20rpx;
	}
</style>